body.is-canvi-ready { overflow-x: hidden }
body.is-canvi-ready .canvi-navbar { display: block; visibility: visible; width:65% !important;background: #025b9a;}
.canvi-navbar, .canvi-overlay { top: 0; bottom: 0; visibility: hidden }
.canvi-navbar { position: fixed; height:100%;  width: 280px; display: none; transition: -webkit-transform .3s cubic-bezier(.42, 0, .58, 1); transition: transform .3s cubic-bezier(.42, 0, .58, 1); transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1); will-change: transform; -webkit-overflow-scrolling: touch; overflow: auto }
.canvi-content, .canvi-navbar.is-canvi-open { transition: -webkit-transform .3s cubic-bezier(.42, 0, .58, 1) }
.canvi-navbar::-webkit-scrollbar {
width:0
}
.canvi-navbar::-webkit-scrollbar-track {
background:#efefef
}
.canvi-navbar::-webkit-scrollbar-thumb {
background:#ddd;
border-radius:2px
}
.canvi-navbar.is-canvi-open { transition: transform .3s cubic-bezier(.42, 0, .58, 1); transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1); will-change: transform }
.canvi-navbar[data-position=right] { right: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) }
.canvi-navbar[data-position=right].is-canvi-open, .canvi-navbar[data-position=right][data-push-content=true] { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.canvi-navbar[data-position=left] { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) }
.canvi-navbar[data-position=left].is-canvi-open, .canvi-navbar[data-position=left][data-push-content=true] { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.canvi-navbar[data-push-content=false] { z-index: 10 }
.canvi-navbar[data-push-content=true] { z-index: 1 }
.canvi-content { position: relative; z-index: 5; transition: transform .3s cubic-bezier(.42, 0, .58, 1); transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1); overflow: hidden;}
.canvi-content.is-canvi-open { transition: -webkit-transform .3s cubic-bezier(.42, 0, .58, 1); transition: transform .3s cubic-bezier(.42, 0, .58, 1); transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1) }
.canvi-overlay { position: absolute; right: 0; left: 0;opacity: 0; z-index: 1031 }
.canvi-content.is-canvi-open .canvi-overlay { visibility: visible; -webkit-animation-name: canvi-animate-in; animation-name: canvi-animate-in; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1); animation-timing-function: cubic-bezier(.42, 0, .58, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden }
.canvi-content.is-canvi-open .canvi-overlay.canvi-animate-out { -webkit-animation-name: canvi-animate-out; animation-name: canvi-animate-out; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1); animation-timing-function: cubic-bezier(.42, 0, .58, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden }
.canvi-user-info {background:#025b9a; padding: 5% 0 60px 8%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; justify-cnt: left; position: relative }
.canvi-user-info img { max-width: 100%; height: auto }
.canvi-user-info__image { margin-right: 20px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden }
.canvi-user-info__data { width: calc(100% - 70px) }
.canvi-user-info__title { font-weight: 700; color: #fff; font-size: 18px; margin: 0 0 3px; line-height: 1.3em; display: block }
.canvi-user-info__meta { display: inline-block; color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; t:.canvi-user-info__meta
}
.canvi-user-info__meta :hover, .canvi-user-info__meta:active, .canvi-user-info__meta:focus { color: rgba(255,255,255,.9) }
.canvi-user-info__close { position: absolute;width: 40px; height: 40px; border-radius: 2px; transition: .3s; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 18px;}
.canvi-user-info__close:hover { background: rgba(0,0,0,.6) }
.canvi-user-info__close::after, .canvi-user-info__close::before { content: ''; width: 20px; height: 3px; background: #fff; position: absolute; top: 18px }
.canvi-user-info__close::before { left: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg) }
.canvi-user-info__close::after { right: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.canvi-navigation { margin: 0; padding: 0;background:#025b9a; padding-bottom:20px;}
.canvi-navigation li {border-bottom:1px solid #074978}
.canvi-navigation li:not(:last-child) { }
.canvi-navigation__item { padding: 14px 30px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;text-decoration: none }
.canvi-navigation__item.is-active, .canvi-navigation__item:hover { opacity: 1 }
.canvi-navigation__icon-wrapper { margin-right: 20px; width: 30px; height: 30px; border-radius: 3px; background: #aaa; color: #fff; text-align: center; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center }
.canvi-navigation__icon { font-size: 17px; line-height: 1em }
.canvi-navigation__text { color: #fff; font-size: 16px; margin: 0; line-height: 1.3em; display: block;}
.canvi-header { background: #1ce678; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center }
.canvi-header__image { margin: 30px; max-width: 100px; height: auto }
@-webkit-keyframes canvi-animate-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes canvi-animate-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes canvi-animate-out {
0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes canvi-animate-out {
0% {
opacity:1
}
100% {
opacity:0
}
}
